<template>
  <header class="header transition_1" 
  :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }"
  >
    <div class="header_logo flex flex-align-center">
      <div class="cursor-pointer" @click="()=>router.push('/index')" style="    display: flex;
    justify-content: center;
    align-items: center;"><img class="logo_box"  src="../assets/logo.jpg" alt="" srcset="">
      <span style="margin-left:10px;">啊皮量化</span></div> 
      <div class="flex header_logo_L" >
        <p class="flex header-show position-re cursor-pointer" >
          背景
          <section :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }" class="header-show-select position-ab transition_05"> 
            <div style="padding-left: 5px;" v-for="list in allDataList?.message.filter((o)=>o.topic=='背景')" :key="list.id">
              <router-link :style="{color:`var(${colorVar.HeaderBackTextColor})` }" :to="`/content?content=${encodeURI(list.content)}&picture_url=${list.picture_url}&sub_topic=${list.sub_topic}&forward_url=${list.forward_url}`" >{{list.sub_topic}}</router-link>
              </div>
          </section>
          <span class="ml-2 flex flex-align-center">
            <el-icon><ArrowDown /></el-icon
          ></span>
        </p>
        <p class="flex header-show position-re cursor-pointer">
          产品
          <section :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }" class="header-show-select position-ab transition_05 "> 
            <div style="padding-left: 5px;" v-for="list in allDataList?.message.filter((o)=>o.topic=='产品')" :key="list.id">
                <router-link :style="{color:`var(${colorVar.HeaderBackTextColor})` }" :to="`/content?content=${encodeURI(list.content)}&picture_url=${list.picture_url}&sub_topic=${list.sub_topic}&forward_url=${list.forward_url}`" >{{list.sub_topic}}</router-link>
            </div>
          </section>
          <span class="ml-2 flex flex-align-center">
            <el-icon><ArrowDown /></el-icon
          ></span>
        </p>
        <p class="flex header-show position-re cursor-pointer">
          入门
          <section :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }" class="header-show-select position-ab transition_05 "> 
             <div style="padding-left: 5px;" v-for="list in allDataList?.message.filter((o)=>o.topic=='入门')" :key="list.id">
              <!-- "{name:'content',params:{content:list.content}}" -->
                <router-link :style="{color:`var(${colorVar.HeaderBackTextColor})` }" :to="`/content?content=${encodeURI(list.content)}&picture_url=${list.picture_url}&sub_topic=${list.sub_topic}&forward_url=${list.forward_url}`" >{{list.sub_topic}}</router-link>
            </div>
          </section>
          <span class="ml-2 flex flex-align-center">
            <el-icon><ArrowDown /></el-icon
          ></span>
        </p>
        <p class="flex header-show position-re cursor-pointer">
          福利
          <section :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }" class="header-show-select position-ab transition_05 "> 
            <div style="padding-left: 5px;" v-for="list in allDataList?.message.filter((o)=>o.topic=='福利')" :key="list.id">
                <router-link :style="{color:`var(${colorVar.HeaderBackTextColor})` }" :to="`/content?content=${encodeURI(list.content)}&picture_url=${list.picture_url}&sub_topic=${list.sub_topic}&forward_url=${list.forward_url}`" >{{list.sub_topic}}</router-link>
            </div>
          </section>
          <span class="ml-2 flex flex-align-center">
            <el-icon><ArrowDown /></el-icon
          ></span>
        </p>
        <p class="flex header-show position-re cursor-pointer">
          公司
          <section :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }" class="header-show-select position-ab transition_05 "> 
            <div style="padding-left: 5px;" v-for="list in allDataList?.message.filter((o)=>o.topic=='公司' && o.sub_topic !== '口号')" :key="list.id">
               <router-link :style="{color:`var(${colorVar.HeaderBackTextColor})` }" :to="`/content?content=${encodeURI(list.content)}&picture_url=${list.picture_url}&sub_topic=${list.sub_topic}&forward_url=${list.forward_url}`" >{{list.sub_topic}}</router-link>
            </div>
          </section>
          <span class="ml-2 flex flex-align-center">
            <el-icon><ArrowDown /></el-icon
          ></span>
        </p>
      </div>
    </div>
    <div class="flex trans">
      <div  :style="{
      color: `var(${colorVar.HeaderBackTextColor})`,
    }" class="flex flex-align-center flex-direction-row header_search_Box">
        <p class="cursor-pointer" v-for="list in allDataList?.message.filter((o)=>o.id == 20)" :key="list.id">
           <router-link :to="`/content?content=${ encodeURI(list.content)}&picture_url=${list.picture_url}&sub_topic=${list.sub_topic}&forward_url=${list.forward_url}`" >{{list.sub_topic}}</router-link>
               </p>
        
      </div>
    </div>
  </header>
</template>

<script setup>
import { defineProps } from "vue";

import { useRouter } from "vue-router";
const router = useRouter()
  defineProps({
  colorVar: {
     type: Object,
       // eslint-disable-next-line vue/require-valid-default-prop
       default: {
      HeaderBackGroundColor: "--gray-900",
      HeaderBackTextColor: "--yellow-050",
    },
   },
   allDataList: {
    type :Object
  }
 });

</script>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 60px;
   background-color: var(--simple-color);
   z-index: 9999;
}
.header_logo {
  margin: 0px 20px;
}
.header_logo_L {
  flex-direction: row;
  line-height: 32px;
  margin: 0 20px;
}
.header_logo_L > p {
  margin: 0 10px;
}
.header_search_Box > p {
  margin: 0 20px;
}

.header-show:hover > span {
  transition: all 0.5s;
  transform: rotate(180deg);
}
.logo_box{
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.header-show > .header-show-select{
  width: 150px;
  top: 30px;
  display: none;
  background: transparent;
  transition: all 1s;
}
.header-show > .header-show-select > span{
      display: flex;
    align-items: center;
}
.header-show:hover .header-show-select{
  display: block;
  transition: all 1s;
}
.trans{
  background-color: transparent;
}
</style>
